<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>区域维护</title>
    <link rel="stylesheet" href="plugins/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="css/comments.css" media="all">
    <style>
        .layui-form-label{
            width: 110px;
        }
        @media screen and (max-width: 450px){
            .layui-form-item .layui-input-inline {
                margin-left: 140px;
            }
        }
        .layui-input-block{
            margin-left: 140px;
        }
        #modifyForm,#modifyFormt{
            padding: 20px 20px 0 0;
            display: none;
        }
    </style>
</head>
<body>
    <div class="maincontainer">
        <blockquote class="layui-elem-quote">
            区域维护
            <button type="button" class="layui-btn layui-btn-sm" style="float: right;margin-top: -4px;" onclick="window.history.back();">返回</button>
        </blockquote>
        <form class="layui-form" action="" lay-filter="example">
            <div class="layui-form-item">
                <div id="test1" style="margin-left: 140px;"></div>
            </div>
            <!-- <div class="layui-form-item">
              <div class="layui-input-block">
                <button type="button" class="layui-btn" lay-submit="" lay-filter="demo1">确认</button>
                <button type="button" class="layui-btn layui-btn-primary" onclick="window.history.back()">取消</button>
              </div>
            </div> -->
        </form>

        <div id="modifyForm">
            <form class="layui-form" action="" lay-filter="modifyForm">
                <div class="layui-form-item">
                    <label class="layui-form-label">区域名称：</label>
                    <div class="layui-input-block">
                      <input type="text" name="regionName" autocomplete="off" placeholder="请输入区域名称" class="layui-input" maxlength="20">
                    </div>
                </div>
            </form>
        </div>
        <div id="modifyFormt">
            <form class="layui-form" action="" lay-filter="modifyFormt">
                <div class="layui-form-item">
                    <label class="layui-form-label">区域名称：</label>
                    <div class="layui-input-block">
                      <input type="text" name="regionName" autocomplete="off" placeholder="请输入区域名称" class="layui-input" maxlength="20">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">备注：</label>
                    <div class="layui-input-block">
                        <textarea name="remarks" placeholder="请输入区域下食堂或园区" class="layui-textarea" maxlength="140"></textarea>
                    </div>
                </div>
            </form>
        </div>
    </div>
<script type="text/javascript" src="plugins/layui/layui.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script>

    layui.config({
        base: 'plugins/layui/modules/',
    }).use(['http', 'form', 'tree'], function() {
        var http = layui.http,
            form = layui.form,
            tree = layui.tree;

        //渲染
        var userInfo = localStorage.getItem('xi-can-management-userInfo')
        var userId = ''
        if(userInfo){
            userInfo = JSON.parse(userInfo)
            userId = userInfo.userInfo.id
            init()
        }
        function init(){
            if(localStorage.getItem('xi-can-management-treem-'+userId)){
                var nodeList = JSON.parse(localStorage.getItem('xi-can-management-treem-'+userId))
                http.postJSON('admin/region/listAllRegionWithSpread',JSON.stringify(nodeList),function(res){
                    if(res.code == 200){
                        successFun(res)
                    }else{
                        layer.msg(res.msg)
                    }
                })
            }else{
                http.get('admin/region/listAllRegion',{},function(res){
                    if(res.code == 200){
                        successFun(res)
                    }else{
                        layer.msg(res.msg)
                    }
                })

            }
        }
        function successFun(res){
            for(var i=0;i<res.data.length;i++){
                res.data[i].parentId = 0
                res.data[i].treeParentId = '0'
            }
            var myData = [{
                id: 0,
                parentId: null,
                regionName: "区域维护",
                remarks: "",
                treeId: "0",
                treeParentId: null,
                level: '',
                children: res.data,
                spread: true
            }]
            // // console.log(myData)
            var inst1 = tree.render({
                elem: '#test1'  //绑定元素
                ,id: 'inst1'
                ,data: myData
                ,edit: ['add', 'update', 'del']
                ,done: function() {
                    var tip_index
                    $(".layui-tree-txt").hover(function(){
                        var level = $(this).data('level')
                        // console.log(level)
                        if(level == 2){
                            var remarks = $(this).data('remarks')
                            tip_index=layer.tips(remarks, this, {
                                time:0
                            });
                        }
                    },function(){
                        layer.close(tip_index);
                    });
                }
                ,operate: function(obj){
                    var flag = true

                    var type = obj.type; //得到操作类型：add、edit、del
                    var data = obj.data; //得到当前节点的数据
                    var elem = obj.elem; //得到当前节点元素
                    
                    if(type === 'add'){ //增加节点
                        //返回 key 值
                        if(data.level == 1){
                            $("#modifyFormt .layui-form")[0].reset();
                            http.myOpen({
                                title:'区域管理',
                                content: $('#modifyFormt'),
                                area:['500px','350px'],
                                btn:['确定','取消'],
                                btn1:function(index, layero){
                                    http.post('admin/region/add',{
                                        parentId: data.id == 0?'':data.id,
                                        regionName: $('#modifyFormt input[name=regionName]').val(),
                                        remarks: $('#modifyFormt textarea[name=remarks]').val()
                                    },function(res){
                                        if(res.code == 200){
                                            init()
                                            layer.close(index)
                                        }else{
                                            flag = false
                                            layer.msg(res.msg)
                                        }
                                    })
                                }
                            })

                        }else{
                            $("#modifyForm .layui-form")[0].reset();
                            http.myOpen({
                                title:'区域管理',
                                content: $('#modifyForm'),
                                area:['500px','300px'],
                                btn:['确定','取消'],
                                btn1:function(index, layero){
                                    http.post('admin/region/add',{
                                        parentId: data.id == 0?'':data.id,
                                        regionName: $('#modifyForm input[name=regionName]').val()
                                    },function(res){
                                        if(res.code == 200){
                                            init()
                                            layer.close(index)
                                        }else{
                                            flag = false
                                            layer.msg(res.msg)
                                        }
                                    })
                                }
                            })

                        }
                    }else if(type === 'update'){ //修改节点
                        if(data.level == 2){
                            $("#modifyFormt .layui-form")[0].reset();
                            form.val('modifyFormt',{
                                regionName: data.regionName,
                                remarks: data.remarks
                            })
                            http.myOpen({
                                title:'区域管理',
                                content: $('#modifyFormt'),
                                area:['500px','350px'],
                                btn:['确定','取消'],
                                btn1:function(index, layero){
                                    http.post('admin/region/update',{
                                        id: data.id,
                                        parentId: data.parentId==0?'':data.parentId,
                                        regionName: $('#modifyFormt input[name=regionName]').val(),
                                        remarks: $('#modifyFormt textarea[name=remarks]').val()
                                    },function(res){
                                        if(res.code == 200){
                                            init()
                                            layer.close(index)
                                        }else{
                                            flag = false
                                            layer.msg(res.msg)
                                        }
                                    })
                                }
                            })

                        }else{
                            $("#modifyForm .layui-form")[0].reset();
                            form.val('modifyForm',{
                                regionName: data.regionName
                            })
                            http.myOpen({
                                title:'区域管理',
                                content: $('#modifyForm'),
                                area:['500px','300px'],
                                btn:['确定','取消'],
                                btn1:function(index, layero){
                                    http.post('admin/region/update',{
                                        id: data.id,
                                        parentId: data.parentId==0?'':data.parentId,
                                        regionName: $('#modifyForm input[name=regionName]').val()
                                    },function(res){
                                        if(res.code == 200){
                                            init()
                                            layer.close(index)
                                        }else{
                                            flag = false
                                            layer.msg(res.msg)
                                        }
                                    })
                                }
                            })

                        }
                        
                    } else if(type === 'del'){ //删除节点
                        http.postSync('admin/region/delete',{
                            id: data.id,
                        },function(res){
                            if(res.code == 200){
                                layer.msg('操作成功')
                            }else{
                                layer.msg(res.msg)
                                flag = false
                            }
                        })
                        return flag
                    };


                },
                spread: function(obj){
                    // console.log(obj)
                    if(obj.state == 0){ // 收起
                        closeNode(obj.data.id)
                    }else if(obj.state == 1){ // 展开
                        openNode(obj.data.id)
                    }
                }
            });
        }
        
        function closeNode(id){
            var nodeList = localStorage.getItem('xi-can-management-treem-'+userId)
            if(nodeList){
                nodeList = JSON.parse(nodeList)
                for(var i=0;i<nodeList.length;i++){
                    if(nodeList[i] == id){
                        nodeList.splice(i,1)
                    }
                }
                localStorage.setItem('xi-can-management-treem-'+userId,JSON.stringify(nodeList))
            }
        }
        function openNode(id){
            var nodeList = localStorage.getItem('xi-can-management-treem-'+userId)
            if(nodeList){
                nodeList = JSON.parse(nodeList)
            }else{
                nodeList = []
            }
            
            nodeList.push(id)
                localStorage.setItem('xi-can-management-treem-'+userId,JSON.stringify(nodeList))

        }

    })
</script>
</body>
</html>